<template>
    <el-dialog v-model="centerDialogVisible" :title="centerDialogTitle" width="45%" :show-close="false">
        <el-config-provider :locale="locale">
            <el-date-picker ref="datePicker" v-model="addTime1" type="date" format="YYYY-MM-DD" :teleported="true" />
        </el-config-provider>
        <div class="text_box" style="width: 100%; height: 40vh;">
            <textarea v-model="dormData" name="" id="" placeholder="输入宿舍号回车继续添加，输入完成后点击下方发布按钮返回..."></textarea>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button class="cancel" @click="centerDialogVisible = false">取消</el-button>
                <el-button class="confirm" type="primary" @click="confirm">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- <el-dialog v-model="centerDialogVisible1" title="通知公告" width="45%" :show-close="false">
        <div class=text_box style="width: 100%; height: 40vh;">
            <textarea v-model="noticeValue" name="" id="" placeholder="在此处输入通知公告..."></textarea>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button class="cancel" @click="centerDialogVisible1 = false">取消</el-button>
                <el-button class="confirm" type="primary" @click="confirm1">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog> -->

    <el-dialog v-model="centerDialogVisible2" :title="centerDialogTitle" width="45%" :show-close="false">
        <el-config-provider :locale="locale">
            <el-date-picker ref="datePicker" v-model="addTime2" type="date" format="YYYY-MM-DD" :teleported="true" />
        </el-config-provider>
        <div class="text_box" style="width: 100%; height: 40vh;">
            <textarea v-model="weijiDormData" name="" id="" placeholder="输入宿舍号回车继续添加，输入完成后点击下方发布按钮返回..."></textarea>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button class="cancel" @click="centerDialogVisible2 = false">取消</el-button>
                <el-button class="confirm" type="primary" @click="confirm2">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- <div :class="dialog" @click="handleClickOutside">
        <div class="dialog_box" ref="container" style="z-index: 1000;">
            <div class="header">
                <p>{{ centerDialogTitle }}</p>
            </div>
            <div class="time_box1">
                <el-config-provider :locale="locale">
                    <el-date-picker ref="datePicker" v-model="InspectTime" type="date" format="YYYY-MM-DD" teleported
                        popper-class="time123" @change="changeTime1" />
                </el-config-provider>
            </div>
            <div class=text_box>
                <textarea v-model="dormData" name="" id="" placeholder="输入宿舍号回车继续添加，输入完成后点击下方发布按钮返回..."></textarea>
            </div>
            <div class="btn_box">
                <button class="cancel" @click="centerDialogVisible = false">取消</button>
                <button class="confirm" @click="confirm">确认</button>
            </div>
        </div>
    </div> -->
    <div :class="dialog1" @click="handleClickOutside1">
        <div class="dialog_box" ref="container1">
            <div class="header">
                <p>通知公告</p>
            </div>
            <div class="text_box1">
                <textarea v-model="noticeValue" name="" id="" placeholder="在此处输入通知公告..."></textarea>
            </div>
            <div class="btn_box">
                <button class="cancel" @click="cancel">取消</button>
                <button class="confirm" @click="confirm1">确认</button>
            </div>
        </div>
    </div>
    <!-- <div :class="dialog2" @click="handleClickOutside2">
        <div class="dialog_box" ref="container2">
            <div class="header">
                <p>{{ centerDialogTitle }}</p>
            </div>
            <div class=text_box>
                <textarea v-model="weijiDormData" name="" id="" placeholder="输入宿舍号回车继续添加，输入完成后点击下方发布按钮返回..."></textarea>
            </div>
            <div class="btn_box">
                <button class="cancel" @click="centerDialogVisible2 = false">取消</button>
                <button class="confirm" @click="confirm2">确认</button>
            </div>
        </div>
    </div> -->



    <div class="dormitory_box">
        <div class="top">
            <div class="school_badge">
                <img src="../../assets/school_badge.png">
            </div>
            <div class="title">
                <p>宿舍评优后台中心</p>
            </div>
        </div>
        <div class="main">
            <div class="main_left">
                <div class="time_box flex">
                    <div>
                        <h3>欢迎使用工作后台</h3>
                        <p class="pTip">宿舍检查 通知公告</p>
                    </div>
                    <div class="nowTime">
                        <div class="nowTime_box">
                            <p class="pTime">{{ hours }}:{{ minutes }}</p>
                            <div class="shuxian"></div>
                            <div class="date_box">
                                <p>{{ week }}</p>
                                <p>{{ day }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="notice_box">
                    <div class="notice_top flex">
                        <div class="topLeft flex">
                            <img src="../../assets/room_dian_icon.png">
                            <p>通知公告</p>
                        </div>
                        <div class="topRight flex">
                            <!-- <div class="featureBtn" @click="announceHandle">
                                <img src="../../assets/room_publish_icon.png">
                                <p>发布</p>
                            </div> -->
                            <div class="featureBtn" @click="addNoticeHandle">
                                <img src="../../assets/room_add_icon1.png">
                                <p>添加</p>
                            </div>
                        </div>
                    </div>
                    <div class="notice_main">
                        <div class="notice_main_li" v-for="(item, index) in noticeList" :key="index">
                            <p class="ellipsis">{{ index + 1 }}<span>、</span>{{ item.content }}</p>
                            <div class="btn_box">
                                <div class="featureBtn delBtn" @click="noticeDeleteHandle(item)">
                                    <img src="../../assets/room_del_icon.png" alt="">
                                    <p>删除</p>
                                </div>
                                <div class="featureBtn editBtn" @click="noticeEditHandle(item)">
                                    <img src="../../assets/room_edit_icon.png" alt="">
                                    <p>修改</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="weiji_box">
                    <div class="weiji_top flex">
                        <div class="topLeft flex">
                            <img src="../../assets/room_dian_icon.png">
                            <p>违纪宿舍</p>
                        </div>
                        <div class="select_box">
                            <div class="flex">
                                <div class="flex">
                                    <p>选择时间: </p>
                                    <span>{{ InspectTime }}</span>
                                </div>
                                <el-icon>
                                    <CaretBottom />
                                </el-icon>
                            </div>
                            <div class="datePicker_box">
                                <el-config-provider :locale="locale">
                                    <el-date-picker ref="datePicker" v-model="InspectTime" type="date"
                                        format="YYYY-MM-DD" @change="changeTime" />
                                </el-config-provider>
                            </div>
                        </div>
                        <div class="featureBtn" @click="addWeijiDorm" style="visibility: hidden;">
                            <img src="../../assets/room_publish_icon.png">
                            <p>发布</p>
                        </div>
                    </div>
                    <div class="weiji_main flex">
                        <div class="weiji_li weiji_li1">
                            <div class="time_tips time_tips1">早</div>
                            <img :class="{ 'imgbox': list != null && list.filter(val => val.typeName == '违纪早').length !== 0 }"
                                @click="addWeijiHandle('早')" src="../../assets/room_add_icon.png" alt="">
                            <div class="sushe_box">
                                <!-- <div class="sushe_li" v-for="(item, index) in weijidormitory" :key="index">{{ item.value }}
                                </div> -->
                                <el-tag size="large" v-for="(item, index) in list" :key="item.id" closable
                                    v-show="item.typeName == '违纪早'" @close="handleClose(item.id)">
                                    {{ item.name }}
                                </el-tag>
                            </div>
                        </div>
                        <div class="weiji_li weiji_li2">
                            <div class="time_tips time_tips2">中</div>
                            <img :class="{ 'imgbox': list != null && list.filter(val => val.typeName == '违纪中').length !== 0 }"
                                @click="addWeijiHandle('中')" src="../../assets/room_add_icon.png" alt="">
                            <div class="sushe_box">
                                <el-tag size="large" v-for="(item, index) in list" :key="item.id" closable
                                    v-show="item.typeName == '违纪中'" @close="handleClose(item.id)">
                                    {{ item.name }}
                                </el-tag>
                            </div>
                        </div>
                        <div class="weiji_li weiji_li3">
                            <div class="time_tips time_tips3">晚</div>
                            <img :class="{ 'imgbox': list != null && list.filter(val => val.typeName == '违纪晚').length !== 0 }"
                                @click="addWeijiHandle('晚')" src="../../assets/room_add_icon.png" alt="">
                            <div class="sushe_box">
                                <el-tag size="large" v-for="(item, index) in list" :key="item.id" closable
                                    v-show="item.typeName == '违纪晚'" @close="handleClose(item.id)">
                                    {{ item.name }}
                                </el-tag>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="main_right">
                <div class="main_right_top flex">
                    <div class="topLeft flex">
                        <img src="../../assets/room_dian_icon.png">
                        <p>宿舍检查</p>
                    </div>
                    <div class="select_box" style="margin-left: 100px;">
                        <div class="flex">
                            <div class="flex">
                                <p>选择时间: </p>
                                <span>{{ InspectTime }}</span>
                            </div>
                            <el-icon>
                                <CaretBottom />
                            </el-icon>
                        </div>
                        <div class="datePicker_box">
                            <el-config-provider :locale="locale">
                                <el-date-picker ref="datePicker" v-model="InspectTime" type="date" format="YYYY-MM-DD"
                                    @change="changeTime" />
                            </el-config-provider>
                        </div>
                    </div>
                    <div class="publishBtn" @click="publishHandle">发布</div>
                </div>
                <div class="outstand_box">
                    <div class="head"><span>1月22号</span>优秀宿舍</div>
                    <div class="outstand_box_top flex">
                        <div class="check_box">
                            <div v-if="!outstandDeleteFlag" @click="outstandDeleteFlag = true, outstandEditFlag = false"
                                class="batchBtn">批量操作</div>
                            <div class="flex" v-if="outstandDeleteFlag">
                                <div class="goBack" @click="goBatch"><el-icon>
                                        <ArrowLeftBold />
                                    </el-icon>
                                    <p>返回</p>
                                </div>
                                <el-checkbox v-model="checked1" label="全选" size="large" @change="changeHandle" />
                                <p class="pDel">
                                    <span v-if="!outstandDeleteFlag" class="del_btn">删除</span>
                                    <span v-else class="del_btn1" @click="delDormHandle">删除</span>
                                </p>
                            </div>
                        </div>
                        <div class="btn_box flex" v-if="!outstandDeleteFlag">
                            <div class="featureBtn" @click="editGoodDrom">
                                <img src="../../assets/room_publish_icon.png">
                                <p>修改</p>
                            </div>
                            <div class="featureBtn" @click="addHandle">
                                <img src="../../assets/room_add_icon1.png">
                                <p>添加</p>
                            </div>
                        </div>
                    </div>
                    <div class="outstand_box_main">
                        <div :class="{
        'outstand_li': item.flag == false, 'outstand_li_border': item.flag == true && outstandEditFlag == false,
        'outstand_li_borderEdit': item.flag == false && outstandEditFlag == true
    }" v-for="(item, index) in list" :key="item.id" @click="selectDormitory(item.id)" v-show="item.typeName == '优秀'">
                            <p v-show="!outstandEditFlag">{{ item.name }}</p>
                            <input type="text" v-model.lazy="item.name" ref="inputRef" v-show="outstandEditFlag"
                                @blur="editDromHandle(item)">
                        </div>
                    </div>
                </div>
                <div class="noOutstand_box">
                    <div class="head"><span>1月22号</span>不合格宿舍</div>
                    <div class="outstand_box_top flex">
                        <div class="check_box">
                            <div v-if="!noOutstandDeleteFlag"
                                @click="noOutstandDeleteFlag = true, noOutstandEditFlag = false" class="batchBtn">批量操作
                            </div>
                            <div class="flex" v-if="noOutstandDeleteFlag">
                                <div class="goBack" @click="goBatch1"><el-icon>
                                        <ArrowLeftBold />
                                    </el-icon>
                                    <p>返回</p>
                                </div>
                                <el-checkbox v-model="checked2" label="全选" size="large" @change="changeHandle1" />
                                <p class="pDel">
                                    <span v-if="!noOutstandDeleteFlag" class="del_btn">删除</span>
                                    <span v-else class="del_btn1" @click="delDormHandle1">删除</span>
                                </p>
                            </div>
                        </div>
                        <div class="btn_box flex" v-if="!noOutstandDeleteFlag">
                            <div class="featureBtn" @click="noOutstandEditFlag = !noOutstandEditFlag">
                                <img src="../../assets/room_publish_icon.png">
                                <p>修改</p>
                            </div>
                            <div class="featureBtn" @click="addHandle1">
                                <img src="../../assets/room_add_icon1.png">
                                <p>添加</p>
                            </div>
                        </div>
                    </div>
                    <div class="noOutstand_box_main">
                        <div :class="{
        'outstand_li': item.flag == false, 'outstand_li_border': item.flag == true,
        'outstand_li_borderEdit': item.flag == false && noOutstandEditFlag == true
    }" v-for="(item, index) in list" :key="item.id" @click="selectDormitory1(item.id)" v-show="item.typeName == '不合格'">
                            <p v-show="!noOutstandEditFlag">{{ item.name }}</p>
                            <input type="text" v-model.lazy="item.name" v-show="noOutstandEditFlag" ref="inputRef1"
                                @blur="editDromHandle1(item)">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { httpService } from "@/utils/httpService";
import { formatTime } from "@/utils/dateFormat";
import { CloseBold, CaretBottom, ArrowLeftBold } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import locale from 'element-plus/lib/locale/lang/zh-cn';

export default {
    name: "EBookListView",
    data() {
        return {
            dialogVisible: true,
            checked1: false,
            checked2: false,
            outstandEditFlag: false,
            noOutstandEditFlag: false,
            outstandDeleteFlag: false,
            noOutstandDeleteFlag: false,
            centerDialogVisible: false,
            centerDialogVisible1: false,
            centerDialogVisible2: false,
            centerDialogTitle: '',
            centerDialogActive: '',
            timeFrame: '',
            weijiTime: '',
            InspectTime: '',
            day: '',
            dayTime: '',
            hours: '',
            minutes: '',
            dormData: '',
            weijiDormData: '',
            weekdays: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
            week: '',
            dormitoryData: [],
            dormitoryData1: [],
            dormitoryData2: [],
            weijidormitory: [],
            weijidormitory1: [],
            weijidormitory2: [],
            noticeData: [],
            noticeValue: '',
            noticeTitle: '',
            noticeIndex: '',
            list: [],
            noticeList: [],
            outstandTime: '',
            addTime1: '',
            addTime2: '',
            editNoticeData: {},
            nowTimeDate: '',
        };
    },
    components: { CaretBottom, CloseBold, ArrowLeftBold, ElMessageBox },
    setup() {
        return {
            locale: zhCn,
        }
    },
    mounted() {
        this.weijiTime = formatTime(new Date())
        this.InspectTime = formatTime(new Date())
        this.outstandTime = formatTime(new Date())
        this.addTime1 = formatTime(new Date())
        this.addTime2 = formatTime(new Date())
        this.nowTimeDate = formatTime(new Date())

        this.getNoticeList()
        this.getNowTiem()
        this.getList(this.nowTimeDate)

    },
    computed: {
        dialog() {
            return this.centerDialogVisible == true ? 'dialog1' : 'dialog'
        },
        dialog1() {
            return this.centerDialogVisible1 == true ? 'dialog1' : 'dialog'
        },
        dialog2() {
            return this.centerDialogVisible2 == true ? 'dialog1' : 'dialog'
        },
    },
    watch: {
        $route() { },
    },
    methods: {
        getNowTiem() {
            setInterval(() => {
                this.day = formatTime(new Date())
                const date = new Date()
                this.hours = date.getHours();
                this.minutes = date.getMinutes();
                let number = date.getDay()
                this.week = this.weekdays[number]
                if (this.hours < 10) {
                    this.hours = `0${this.hours}`
                }
                if (this.minutes < 10) {
                    this.minutes = `0${this.minutes}`
                }
            }, 1000)
        },
        handleClickOutside(event) {
            if (!this.$refs.container.contains(event.target)) {
                this.centerDialogVisible = false;
            }
        },
        handleClickOutside1(event) {
            if (!this.$refs.container1.contains(event.target)) {
                this.centerDialogVisible1 = false;
                this.noticeValue = ''
            }
        },
        handleClickOutside2(event) {
            if (!this.$refs.container2.contains(event.target)) {
                this.centerDialogVisible2 = false;
            }
        },
        editGoodDrom() {
            this.outstandEditFlag = !this.outstandEditFlag
        },
        changeHandle(value) {
            this.list.map(item => {
                if (item.typeName == '优秀') {
                    item.flag = value
                }
            })
        },
        changeHandle1(value) {
            // this.dormitoryData1.map(item => {
            //     item.flag = value
            // })
            this.list.map(item => {
                if (item.typeName == '不合格') {
                    item.flag = value
                }
            })
        },
        selectDormitory(index) {
            if (this.outstandDeleteFlag) {
                this.list.map(item => {
                    if (item.id == index) {
                        item.flag = !item.flag
                    }
                })
                if (this.list.filter(item => item.flag == true).length == 0) {
                    this.checked1 = false
                }
                if (this.list.filter(item => item.flag == false).length == 0) {
                    this.checked1 = true
                }
            } else {
                return
            }

        },
        selectDormitory1(index) {
            if (this.noOutstandDeleteFlag) {
                this.list.map(item => {
                    if (item.id == index) {
                        item.flag = !item.flag
                    }
                })
                if (this.list.filter(item => item.flag == true).length == 0) {
                    this.checked2 = false
                }
                if (this.list.filter(item => item.flag == false).length == 0) {
                    this.checked2 = true
                }
            } else {
                return
            }
        },

        addHandle() {
            this.centerDialogTitle = '添加优秀宿舍'
            this.centerDialogVisible = true
        },
        addHandle1() {
            this.centerDialogTitle = '添加不合格宿舍'
            this.centerDialogVisible = true
        },

        delDormHandle() {
            let arr = this.list.filter(item => item.typeName == '优秀' && item.flag == true)
            if (arr.length > 1) {
                for (let i = 0; i < arr.length; i++) {
                    let params = new FormData()
                    params.append('id', arr[i].id)
                    httpService("/javaApi/baseRoomCheck/deleteById", params, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                this.getList(this.InspectTime)
                                ElMessage.success('删除成功')
                            } else {
                                ElMessage.error('删除失败')
                            }
                        }
                    );
                }
            } else if (arr.length == 1) {
                let params = new FormData()
                params.append('id', arr[0].id)
                httpService("/javaApi/baseRoomCheck/deleteById", params, "post").then(
                    (data) => {
                        if (data.code == 200) {
                            this.getList(this.InspectTime)
                            ElMessage.success('删除成功')
                        } else {
                            ElMessage.error('删除失败')
                        }
                    }
                );
            } else {
                return
            }
            this.checked1 = false
        },
        delDormHandle1() {
            let arr = this.list.filter(item => item.typeName == '不合格' && item.flag == true)
            if (arr.length > 1) {
                for (let i = 0; i < arr.length; i++) {
                    let params = new FormData()
                    params.append('id', arr[i].id)
                    httpService("/javaApi/baseRoomCheck/deleteById", params, "post").then(
                        (data) => {
                            console.log(data);
                            if (data.code == 200) {
                                this.getList(this.InspectTime)
                                ElMessage.success('删除成功')
                            } else {
                                ElMessage.error('删除失败')
                            }
                        }
                    );
                }
            } else if (arr.length == 1) {
                let params = new FormData()
                params.append('id', arr[i].id)
                httpService("/javaApi/baseRoomCheck/deleteById", params, "post").then(
                    (data) => {
                        console.log(data);
                        if (data.code == 200) {
                            this.getList(this.InspectTime)
                            ElMessage.success('删除成功')
                        } else {
                            ElMessage.error('删除失败')
                        }
                    }
                );
            } else {
                return
            }
            this.checked2 = false

        },

        addWeijiHandle(str) {
            this.centerDialogTitle = '添加违纪宿舍'
            this.timeFrame = str
            this.centerDialogVisible2 = true
        },

        changeTime() {
            this.InspectTime = formatTime(this.InspectTime)
            this.getList(this.InspectTime)
        },
        cancel() {
            this.centerDialogVisible1 = false
            this.noticeValue = ''
        },
        confirm() {
            let arr = []
            arr = this.dormData.split('\n').filter(item => item !== '')
            if (this.centerDialogTitle == '添加优秀宿舍') {
                this.dormitoryData = arr.map(item => {
                    return { 'name': item, 'typeName': '优秀' }
                })
            } else {
                this.dormitoryData1 = arr.map(item => {
                    return { 'name': item, 'typeName': '不合格' }
                })
            }
            this.centerDialogVisible = false
            if (this.addTime1.length != 10) {
                this.addTime1 = formatTime(this.addTime1)
            }
            if (this.nowTimeDate == this.addTime1) {
                let dormArr = []
                dormArr = this.dormitoryData.concat(this.dormitoryData1, this.list)
                dormArr = JSON.stringify(dormArr)
                let params = new FormData()
                params.append('checkDateStr', this.addTime1)
                params.append('json', dormArr)
                httpService("/javaApi/baseRoomCheck/addBatch", params, "post").then(
                    (data) => {
                        console.log(data);
                        if (data.code == 200) {
                            this.getList(this.addTime1)
                            this.dormData = ''
                            this.dormitoryData = []
                            this.dormitoryData1 = []
                            ElMessage.success('添加成功')
                        } else {
                            ElMessage.error('添加失败')
                        }
                    }
                );

            } else {
                httpService("/javaApi//baseRoomCheck/list/1/1000", {
                    checkDateStr: this.addTime1,
                }, "get").then(
                    (data) => {
                        let dormArr = []
                        dormArr = [...this.dormitoryData, ...this.dormitoryData1, ...data.list]
                        console.log(123, dormArr);
                        dormArr = JSON.stringify(dormArr)
                        let params = new FormData()
                        params.append('checkDateStr', this.addTime1)
                        params.append('json', dormArr)
                        httpService("/javaApi/baseRoomCheck/addBatch", params, "post").then(
                            (data) => {
                                console.log(data);
                                if (data.code == 200) {
                                    this.InspectTime = this.addTime1
                                    this.getList(this.addTime1)
                                    this.dormData = ''
                                    this.dormitoryData = []
                                    this.dormitoryData1 = []
                                    ElMessage.success('添加成功')
                                } else {
                                    ElMessage.error('添加失败')
                                }
                            }
                        );
                    }
                );
            }

        },
        confirm1() {
            if (this.noticeTitle == '修改') {
                console.log(123, this.noticeValue);
                let params = new FormData()
                params.append('id', this.editNoticeData.id)
                params.append('content', this.noticeValue)
                httpService("/javaApi/baseRoomNotice/edit", params, "post").then(
                    (data) => {
                        console.log(data);
                        if (data.code == 200) {
                            this.noticeValue = ''
                            this.editNoticeData = {}
                            this.getNoticeList()
                            ElMessage.success('修改成功')
                        } else {
                            ElMessage.error('修改失败')
                        }
                    }
                );
                this.centerDialogVisible1 = false
            } else if (this.noticeTitle == '添加') {
                let params = new FormData()
                params.append('content', this.noticeValue)
                params.append('isTop', 0)
                params.append('sortNum', 1)
                httpService("/javaApi/baseRoomNotice/add", params, "post").then(
                    (data) => {
                        console.log(data);
                        if (data.code == 200) {
                            this.noticeValue = ''
                            this.getNoticeList()
                            ElMessage.success('添加成功')
                        } else {
                            ElMessage.error('添加失败')
                        }
                    }
                );
                this.centerDialogVisible1 = false
            }
        },
        confirm2() {
            if (this.addTime2.length != 10) {
                this.addTime2 = formatTime(this.addTime2)
            }

            let arr = this.weijiDormData.split('\n').filter(item => item !== '')
            if (this.timeFrame == '早') {
                this.weijidormitory = arr.map(item => {
                    return { 'name': item, 'buildingName': 'SS1001', 'typeName': '违纪早' }
                })
            } else if (this.timeFrame == '中') {
                this.weijidormitory1 = arr.map(item => {
                    return { 'name': item, 'buildingName': 'SS1001', 'typeName': '违纪中' }
                })
            } else {
                this.weijidormitory2 = arr.map(item => {
                    return { 'name': item, 'buildingName': 'SS1001', 'typeName': '违纪晚' }
                })
            }

            if (this.nowTimeDate == this.addTime2) {
                let arr1 = [...this.weijidormitory, ...this.weijidormitory1, ...this.weijidormitory2, ...this.list]
                arr1 = JSON.stringify(arr1)
                let params = new FormData()
                params.append('checkDateStr', this.addTime2)
                params.append('json', arr1)
                httpService("/javaApi/baseRoomCheck/addBatch", params, "post").then(
                    (data) => {
                        console.log(data);
                        if (data.code == 200) {
                            this.getList(this.addTime2)
                            this.weijiDormData = ''
                            this.weijidormitory = []
                            this.weijidormitory1 = []
                            this.weijidormitory2 = []
                            ElMessage.success('添加成功')
                        } else {
                            ElMessage.error('添加失败')
                        }
                    }
                );
            } else {
                httpService("/javaApi//baseRoomCheck/list/1/1000", {
                    checkDateStr: this.addTime2,
                }, "get").then(
                    (data) => {
                        let arr1 = [...this.weijidormitory, ...this.weijidormitory1, ...this.weijidormitory2, ...data.list]
                        arr1 = JSON.stringify(arr1)
                        let params = new FormData()
                        params.append('checkDateStr', this.addTime2)
                        params.append('json', arr1)
                        httpService("/javaApi/baseRoomCheck/addBatch", params, "post").then(
                            (data) => {
                                console.log(data);
                                if (data.code == 200) {
                                    this.InspectTime = this.addTime2
                                    this.getList(this.addTime2)
                                    this.weijiDormData = ''
                                    this.weijidormitory = []
                                    this.weijidormitory1 = []
                                    this.weijidormitory2 = []
                                    ElMessage.success('添加成功')
                                } else {
                                    ElMessage.error('添加失败')
                                }
                            }
                        );

                    }
                );
            }

            this.centerDialogVisible2 = false
        },
        addNoticeHandle() {
            this.centerDialogVisible1 = true
            this.noticeTitle = '添加'
        },
        cancelSelection(event) {
            event.preventDefault();
            window.getSelection().removeAllRanges();
        },
        goBatch() {
            this.outstandDeleteFlag = false
            this.checked1 = false
            this.list.map(item => {
                if (item.typeName == '优秀') {
                    item.flag = false
                }
            })
        },
        goBatch1() {
            this.noOutstandDeleteFlag = false
            this.checked2 = false
            this.list.map(item => {
                if (item.typeName == '不合格') {
                    item.flag = false
                }
            })
        },
        editDromHandle(data) {
            let dormArr = JSON.stringify(this.list)
            let params = new FormData()
            params.append('checkDateStr', this.InspectTime)
            params.append('json', dormArr)
            httpService("/javaApi/baseRoomCheck/addBatch", params, "post").then(
                (data) => {
                    console.log(data);
                    if (data.code == 200) {
                        this.getList(this.InspectTime)
                        this.outstandEditFlag = false
                        ElMessage.success('修改成功')
                    } else {
                        ElMessage.error('修改失败')
                    }
                }
            );
        },
        editDromHandle1(data) {
            let dormArr = JSON.stringify(this.list)
            let params = new FormData()
            params.append('checkDateStr', this.InspectTime)
            params.append('json', dormArr)
            httpService("/javaApi/baseRoomCheck/addBatch", params, "post").then(
                (data) => {
                    console.log(data);
                    if (data.code == 200) {
                        this.getList(this.InspectTime)
                        this.noOutstandEditFlag = false
                        ElMessage.success('修改成功')
                    } else {
                        ElMessage.error('修改失败')
                    }
                }
            );
        },
        noticeDeleteHandle(data) {
            ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    console.log(data.id);
                    if (data.id == '') {
                        this.noticeList = this.noticeList.filter(item => item.content != data.content)
                        ElMessage.success(data.message);
                    } else {
                        httpService("/javaApi/baseRoomNotice/deleteById", "id=" + data.id, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success(data.object);
                                    this.getNoticeList()
                                } else {
                                    ElMessage.error(data.object);
                                }
                            }
                        );
                    }
                })
                .catch(() => {
                });
        },
        noticeEditHandle(data) {
            this.centerDialogVisible1 = true
            this.noticeTitle = '修改'
            this.noticeIndex = data.id
            this.noticeValue = data.content
            this.editNoticeData = data
        },
        handleClose(index) {
            ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let params = new FormData()
                    params.append('id', index)
                    httpService("/javaApi/baseRoomCheck/deleteById", params, "post").then(
                        (data) => {
                            console.log(data);
                            if (data.code == 200) {
                                this.getList(this.nowTimeDate)
                                ElMessage.success('删除成功')
                            } else {
                                ElMessage.error('删除失败')
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },
        getList(time) {
            httpService("/javaApi//baseRoomCheck/list/1/1000", {
                // buildingName: 'SS1001',
                // typeName: '优秀',
                checkDateStr: time,
            }, "get").then(
                (data) => {
                    this.list = data.list
                    if (this.list != null) {
                        this.list.sort((a, b) => a.name - b.name)
                        this.list.map(item => { item.flag = false })
                    }
                }
            );
        },
        addWeijiDorm() {
            let arr = [...this.weijidormitory, ...this.weijidormitory1, ...this.weijidormitory2]
            arr = JSON.stringify(arr)
            let params = new FormData()
            params.append('checkDateStr', this.InspectTime)
            params.append('json', arr)
            httpService("/javaApi/baseRoomCheck/addBatch", params, "post").then(
                (data) => {
                    console.log(data);
                    if (data.code == 200) {
                        this.getList(this.nowTimeDate)
                        this.weijiDormData = ''
                    }
                }
            );
        },
        announceHandle() {
            console.log(this.noticeData);
            this.noticeData.forEach(item => {
                let params = new FormData()
                params.append('content', item.value)
                params.append('isTop', '1')
                httpService("/javaApi/baseRoomNotice/add", params, "post").then(
                    (data) => {
                        console.log(data);
                        if (data.code == 200) {
                            ElMessage.success('添加成功')
                        } else {
                            ElMessage.error('添加失败')
                        }
                    }
                );
            })

        },
        getNoticeList() {
            httpService("/javaApi/baseRoomNotice/list/1/100", {}, "get").then(
                (data) => {
                    this.noticeList = data.list
                }
            );
        },
    }
};
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dormitory_box {
    background: url(../../assets/room_bj.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 90%;
    height: 90%;
    /* width: 100%;
    height: 100%; */
    position: relative;
    z-index: 100;
    padding-bottom: 2vh;
}

.top {
    display: flex;
    align-items: center;
    padding: 20px 26px;
}

.top .school_badge {
    /* width: 190px; */
    height: 50px;
}

.top .school_badge img {
    height: 100%;
}

.top .title {
    width: 430px;
    height: 43px;
    line-height: 43px;
    background: url(../../assets/room_title_bg.png) no-repeat;
    background-size: 100% 100%;
    margin-left: 20px;
    color: #FFFFFF;
    font-size: 27px;
    font-family: 'SimSun';
}

.top .title p {
    margin-left: 50px;
}

.main {
    display: flex;
    justify-content: space-between;
    padding: 0 38px 0 32px;
}

.main_left {
    width: 39%;
    /* height: 90vh; */
    /* background-color: coral; */
}

.time_box {
    height: 19vh;
    background: url(../../assets/room_time_bg.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 20px;
    box-shadow: 2px 20px 5px rgba(0, 0, 0, 0.02),
        -0px -20px 15px rgba(0, 0, 0, 0.07),
        -20px 0px 5px rgba(0, 0, 0, 0.02),
        20px -0px 5px rgba(0, 0, 0, 0.02);
}

.time_box h3 {
    font-size: 32px;
    font-size: 1.6vw;
    color: #fff;
    /* padding: 30px 54px; */
    margin-left: 30px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}

.time_box .pTip {
    margin-left: 30px;
    color: #fff;
    font-size: 14px;
    font-size: 0.8vw;
    margin-top: 20px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}

.nowTime {
    border: 1px solid #fff;
    background-color: rgba(142, 188, 245, 0.7);
    width: 45%;
    height: 96px;
    margin-right: 26px;
    border-radius: 5px;
    line-height: 96px;
}


.nowTime_box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nowTime_box .shuxian {
    width: 2px;
    height: 38px;
    background-color: #fff;
    margin: 0 16px 0 18px;
}

.nowTime_box .pTime {
    color: #FFFFFF;
    font-size: 48px;
    font-size: 2.5vw;
}

.nowTime_box .date_box {
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-size: 0.95vw;
    line-height: 30px;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 95%;
    color: #333;
}

.notice_box {
    height: 33vh;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    margin: 10px 0;
    padding: 0 25px 12px 35px;
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.02),
        -0px -5px 15px rgba(0, 0, 0, 0.07),
        -5px 0px 5px rgba(0, 0, 0, 0.02),
        5px -0px 5px rgba(0, 0, 0, 0.02);
}

.notice_top {
    padding: 14px 0 5px;
}

.topLeft {
    width: 150px !important;
    color: #000000;
    font-size: 18px;
    font-weight: bold;
    justify-content: flex-start !important;
}

.topLeft img {
    height: 16px;
    margin-right: 10px;
}

.featureBtn {
    background-color: #fff;
    border: 1.5px solid #D3D3D3;
    width: 80px;
    height: 30px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #484848;
    font-size: 16px;
    margin-left: 16px;
}

.featureBtn img {
    width: 16px;
    margin-right: 10px;
}

.notice_main {
    height: 80%;
    overflow-y: scroll;
}

.notice_main_li {
    border-bottom: 1px dashed #C1C1C1;
    margin-top: 10px;
    margin-right: 10px;
}

.notice_main_li .btn_box {
    margin: 10px 0;
    display: flex;
    justify-content: flex-end;
}

.btn_box .delBtn {
    border-color: #FF0000;
    background-color: #FFEFEF;
    color: #FF0000;
}

.btn_box .editBtn {
    border-color: #0072FF;
    background-color: #F0F7FF;
    color: #0072FF;
}

.weiji_box {
    height: 25vh;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 0 35px;
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.02),
        -0px -5px 15px rgba(0, 0, 0, 0.07),
        -5px 0px 5px rgba(0, 0, 0, 0.02),
        5px -0px 5px rgba(0, 0, 0, 0.02);
}

.weiji_box .weiji_top {
    padding: 14px 0;
}

.select_box {
    width: 220px;
    display: flex;
    align-items: center;
    color: #4F4F4F;
    font-size: 18px;
    position: relative;
}

.select_box span {
    color: #000;
    margin: 1px 10px 0 5px;
}

.select_box .datePicker_box {
    position: absolute;
    opacity: 0;
}

.weiji_main {
    height: 70%;
    /* padding-bottom: 15px; */
}

.weiji_li {
    width: 32%;
    /* height: 155px; */
    height: 100%;
    border-radius: 9px;
    position: relative;
}

.weiji_li img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: top 0.3s ease-in-out, left 0.3s ease-in-out;
}

.weiji_li .imgbox {
    top: 20px;
    left: 90%;
}

.weiji_li .time_tips {
    position: absolute;
    width: 40px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #FFFFFF;
    font-size: 18px;
    border-radius: 9px 0 9px 0;
}

.weiji_li1 {
    background: linear-gradient(to right, #7EAAFF, #5791FF);
}

.weiji_li2 {
    background: linear-gradient(to right, #7AD6F4, #52B1ED);
}

.weiji_li3 {
    background: linear-gradient(to right, #98BBFF, #5A93FF);
}

.time_tips1 {
    background-color: #5A89E2;
}

.time_tips2 {
    background-color: #43ADD9;
}

.time_tips3 {
    background-color: #6897F1;
}

.sushe_box {
    width: 100%;
    height: 70%;
    margin: 40px auto 0;
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: flex-start;
    /* align-items: center; */
}

.sushe_box::-webkit-scrollbar {
    width: 0 !important;
}

.sushe_li {
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 5px;
    margin-bottom: 5px;
}

.el-tag--large.is-closable {
    padding-right: 7px;
    width: 55px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 16px;
}





.main_right {
    width: 58%;
    height: 78vh;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0 12px;
    border-radius: 9px;
    box-shadow: 2px 10px 5px rgba(0, 0, 0, 0.05),
        -0px -10px 15px rgba(0, 0, 0, 0.05),
        -10px 0px 5px rgba(0, 0, 0, 0.05),
        10px -0px 5px rgba(0, 0, 0, 0.05);
    padding-bottom: 15px;
    overflow: hidden;
}

.main_right .main_right_top {
    padding: 5px 20px;
}

.publishBtn {
    width: 210px;
    height: 50px;
    border-radius: 25px;
    background: linear-gradient(to bottom, #FF3737, #FE0000);
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 22px;
    letter-spacing: 10px;
    visibility: hidden;
    /* display: none; */
}

.outstand_box {
    height: 60%;
    border-radius: 5px;
    padding-top: 1px;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.05),
        -0px -10px 15px rgba(0, 0, 0, 0.05),
        -5px 0px 5px rgba(0, 0, 0, 0.05),
        5px -0px 5px rgba(0, 0, 0, 0.05);
    background-color: #ECF1F6;
    overflow: hidden;
}

.outstand_box .head {
    height: 50px;
    background-color: #5C9DEE;
    border-radius: 5px 5px 0 0;
    margin: 0 2px;
    color: #FCFDFF;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
}

.outstand_box .head span {
    margin-right: 10px;
}

.outstand_box_top {
    padding: 10px 25px;
    border-bottom: 1px dashed #C1C1C1;
}

.outstand_box_top .el-checkbox {
    color: #484848;
    font-size: 16px;
    margin-right: 20px;
}

.outstand_box_main {
    width: 96%;
    height: 70%;
    margin: 0 auto;
    padding: 6px 0 0;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-y: scroll;

}

/* .outstand_box_main::-webkit-scrollbar {
    width: 0 !important;
} */

.outstand_box_main input,
.noOutstand_box_main input {
    width: 90%;
    height: 96%;
    line-height: 96%;
    border: none;
    outline: none;
    text-align: center;
    font-size: 16px;
    user-select: none;
    background-color: transparent;
    display: block;
    width: 100%;
    height: 31px;
    line-height: 31px;
    /* background-color: chocolate; */
    /* display: flex;
    align-items: center; */
    /* justify-content: center; */
    /* margin-top: -3px; */
}

.outstand_li {
    /* width: 103px; */
    width: 9%;
    height: 31px;
    border-radius: 5px;
    margin: 10px 5px 0;
    background-color: #fff;
    /* line-height: 30px; */
    text-align: center;
    color: #000000;
    font-size: 16px;
    outline: none;
    overflow: unset;
}



.outstand_li_border {
    /* width: 10.1%;
    height: 45px; */
    width: 9%;
    height: 31px;
    border-radius: 5px;
    margin: 10px 5px 0;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #5C9DEE;
    color: #fff;
}

.outstand_li_borderEdit {
    width: 9%;
    height: 31px;
    border-radius: 5px;
    margin: 10px 5px 0;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    border: 1px solid #5C9DEE;
}

.outstand_li p,
.outstand_li_border p {
    line-height: 31px;
}

.outstand_li_border input {
    color: #fff;
}

.check_box {
    display: flex;
    align-items: center;
}

.goBack {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    background-color: #fff;
    border: 1px solid #D3D3D3;
    height: 30px;
    width: 80px;
    border-radius: 15px;
}

.goBack .el-icon {
    font-size: 16px;
}

.goBack p {
    color: #484848;
    margin-top: -2px;
    margin-left: 5px;
}

.batchBtn {
    background-color: #fff;
    border: 1px solid #D3D3D3;
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 20px;
}

.pDel {
    margin-top: -2px;
    cursor: default;
}

.del_btn {
    color: #CCCCCC;
    font-size: 16px;
}

.del_btn1 {
    color: #FF0000;
    font-size: 16px;
}

.noOutstand_box {
    height: 27.5%;
    border-radius: 5px;
    padding-top: 1px;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.05),
        -0px -10px 15px rgba(0, 0, 0, 0.05),
        -5px 0px 5px rgba(0, 0, 0, 0.05),
        5px -0px 5px rgba(0, 0, 0, 0.05);
    background-color: #ECF1F6;
    margin-top: 10px;
    overflow: hidden;
}

.noOutstand_box .head {
    height: 50px;
    background-color: #697F9B;
    border-radius: 5px 5px 0 0;
    margin: 0 2px;
    color: #FCFDFF;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
}

.noOutstand_box .head span {
    margin-right: 10px;
}

.noOutstand_box_main {
    width: 96%;
    height: 90px;
    margin: 0 auto;
    padding: 6px 0 0;
    display: flex;
    align-items: center;
    align-content: flex-start;
    flex-wrap: wrap;
    overflow-y: scroll;
}

/* .noOutstand_box_main::-webkit-scrollbar {
    width: 0 !important;
} */



.dialog {
    position: fixed;
    width: 100vw;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -11;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, z-index 0.3s ease-in-out;
}

.dialog1 {
    position: fixed;
    width: 100vw;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.dialog_box {
    width: 42%;
    height: 60vh;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
}

.dialog_box .header {
    background-color: #EFF1F9;
    height: 60px;
    line-height: 60px;
}

.dialog_box .header p {
    margin-left: 30px;
    color: #000;
    font-size: 22px;
}

.text_box {
    height: 68%;
    /* margin: 20px; */
    margin-top: 20px;
    border: 1px dashed #B9B9B9;
    border-radius: 5px;
}

.text_box1 {
    height: 68%;
    margin: 20px;
    /* margin-top: 20px; */
    border: 1px dashed #B9B9B9;
    border-radius: 5px;
}

.text_box1 textarea,
.text_box textarea {
    width: 93%;
    height: 90%;
    /* margin: 20px 30px; */
    padding: 2% 3%;
    outline: none;
    border: none;
    font-size: 22px;
    resize: none;
}

.dialog_box .text_box textarea::placeholder {
    color: #B3B3B3;
}

.dialog_box .btn_box {
    text-align: right;
    margin-right: 30px;
}

.dialog_box .btn_box button {
    width: 120px;
    height: 45px;
    border-radius: 5px;
    margin-left: 12px;
    font-size: 22px;
}

.dialog_box .btn_box .cancel {
    background-color: #ECECEC;
    border: 1px solid #B9B9B9;
    color: #7F7F7F;
}

.dialog_box .btn_box .confirm {
    background-color: #0072FF;
    border: none;
    color: #fff;
}

.el-checkbox.el-checkbox--large {
    height: 30px;
}


.dialog-footer button {
    width: 120px;
    height: 45px;
    border-radius: 5px;
    margin-left: 12px;
    font-size: 22px;
}

.dialog-footer .cancel {
    background-color: #ECECEC;
    border: 1px solid #B9B9B9;
    color: #7F7F7F;
}

.dialog-footer .confirm {
    background-color: #0072FF;
    border: none;
    color: #fff;
}
</style>